<template>
	<view class="withdrawal">
		<!-- 顶部导航 -->
		<diyNavBar value='充值' color='#FF6F30'></diyNavBar>

		<!-- 顶部内容 -->
		<view class="topmony"></view>
		<view class="bottommoney">
			<view class="title">充值金额</view>
			<view class="center">
				<text class="left">￥</text>
				<input type="number" v-model="money" placeholder-style="color:rgba(0,0,0,.1)" placeholder="请输入金额" />
			</view>
			<view class="bottom">
				<text class="left">支付方式</text>
				<view class="right" v-if="paymenttype[paymentindex]">
					<text class="iconfont" :class="paymenttype[paymentindex].icon"></text>
					<text class="text" @click="paymentSelect">{{paymenttype[paymentindex].name}}</text>
					<text class="iconfont icon-jinrujiantou"></text>
				</view>
			</view>
			<button type="default" class="button" @click="btn">确认充值</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="payment-box">
				<view class="item" v-for="(item,index) in paymenttype" :key="index" @click="paymentindex = index">
					<view class="item-left">
						<text class="iconfont" :class="item.icon"></text>
						{{item.name}}
					</view>
					<view class="right" v-if="paymentindex == index">
						<view class="center"></view>
					</view>
				</view>
				<button class="close" @click="close">确定</button>
			</view>
		</uni-popup>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default {
		components: {
			diyNavBar,
			loadingCover
		},
		data() {
			return {
				paymenttype: [],
				paymentindex: 0, //支付方式
				money: '',
				code: ''
			}
		},
		onShow() {
			// 支付方式
			this.getpaymenttype()
			let url = window.location.href;
			const code = this.getParam('code');
			if (code) {
				this.code = code
				this.money = this.getParam('state');
				setTimeout(() => {
					this.btn();
				}, 500)

			}
		},
		methods: {
			getParam(name) {
				var search = document.location.search;
				//alert(search);
				var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
				var matcher = pattern.exec(search);
				var items = null;
				if (null != matcher) {
					try {
						items = decodeURIComponent(decodeURIComponent(matcher[1]));
					} catch (e) {
						try {
							items = decodeURIComponent(matcher[1]);
						} catch (e) {
							items = matcher[1];
						}
					}
				}
				return items;
			},
			btn() {
				if (!this.money) {
					uni.showToast({
						title: '请勿输入为空',
						icon: 'none'
					})
					return false
				}
				// #ifdef H5
				if (this.paymenttype[this.paymentindex].id == 1) {
					if (!this.code) {
						let appid = 'wx22e93a7eadd13427';
						let redirect_uri = encodeURIComponent(
							'http://hanbang.diruankeji.com/h5/pages/marginrecharge/marginrecharge');
						let url =
							`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${encodeURIComponent(this.money)}#wechat_redirect`;
						location.href = url;
						return;
					}
				}
				// #endif

				let data = {
					pay_type: this.paymenttype[this.paymentindex].id,
					money: this.money
				}
				if (this.code) {
					data.code = this.code
				}
				let payType = 'wxpay'; //微信
				if (this.paymenttype[this.paymentindex].id == 1) {
					// #ifdef APP
					data.pay_type = 3
					// #endif
				}
				if (this.paymenttype[this.paymentindex].id == 2) {
					payType = 'alipay'; //支付宝
					// #ifdef APP
					data.pay_type = 4
					// #endif
				}
				this.$http.sendrequest('/recharge/Bzprice', data, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						let payData = res.data.pay
						switch (this.paymentindex) {
							case 5:
								location.href = res.data.pay;
								break;
							default:
								// #ifdef APP
								uni.requestPayment({
									provider: payType,
									orderInfo: payData,
									success: res => {
										console.log("返回的支付数据", res)
									},
									fail: err => {
										console.log("err", err)
									}
								})
								// #endif

								// #ifdef H5
								if (this.paymenttype[this.paymentindex].id == '1') {
									let that = this;
									if (WeixinJSBridge) {
										WeixinJSBridge.invoke('getBrandWCPayRequest', {
											appId: res.data.pay.appId,
											timeStamp: res.data.pay.timeStamp,
											nonceStr: res.data.pay.nonceStr, // 支付签名随机串，不长于 32 位
											package: res.data.pay.package,
											signType: res.data.pay.signType,
											paySign: res.data.pay.paySign, // 支付签名
										}, function(r) {
											that.r = JSON.stringify(r)
											// 支付成功后的回调函数
											if (r.err_msg.includes('ok')) {
												uni.showToast({
													title: '支付成功',
													icon: 'success',
													success: () => {
														that.$util.redirectTo(
															'/pages/personal/personal', {},
															'switchTab');
													}
												})
											} else if (r.err_msg.includes('cancel')) {
												uni.showToast({
													title: '支付失败',
													icon: 'none',
													success: () => {
														that.$util.redirectTo(
															'/pages/personal/personal', {},
															'switchTab');
													}
												})
											}
										});
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
										const div = document.createElement('div')
										div.innerHTML = res.data.pay;
										document.body.appendChild(div)
										if (document.getElementById('alipay_submit')) {
											document.getElementById('alipay_submit').submit()
										} else if (document.getElementById('pay_form')) {
											document.getElementById('pay_form').submit()
										}
									}
								}

								// #endif
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			paymentSelect() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			getpaymenttype() {
				this.$http.sendrequest('/payment/PaymentList').then(res => {
					if (res.code == 1) {
						this.paymenttype = res.data;
						this.paymenttype.forEach(item => {
							switch (item.name) {
								case '微信':
									item.icon = 'icon-weixin'
									break;
								case '支付宝':
									item.icon = 'icon-zhifubao'
									break;
							}
						})
						this.$refs.loadingCover.hide();
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.withdrawal {
		min-height: 100vh;

		// background: $uni-content-background-color;
		.topmony {
			background: $uni-tabbar-hovercolor;
			height: 380rpx;
			padding-top: 26rpx;
			color: #FFFFFF;
			font-weight: bold;

			.title {
				margin: 0 48rpx 16rpx;
				font-size: 28rpx;
			}

			.money {
				font-size: 80rpx;
				margin-left: 48rpx;

				text {
					font-size: 40rpx;
				}
			}
		}

		.bottommoney {
			margin: -316rpx 30rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 44rpx 30rpx 32rpx;
			box-sizing: border-box;

			.title {
				font-size: 28rpx;
				margin-bottom: 36rpx;
			}

			.center {
				border-bottom: 2rpx solid rgba(0, 0, 0, .04);
				display: flex;
				align-items: center;
				position: relative;
				margin-bottom: 30rpx;

				.left {
					font-size: 84rpx;
				}

				input {
					font-size: 38rpx;
					margin-left: 24rpx;
				}

				.whole {
					position: absolute;
					right: 30rpx;
					bottom: 26rpx;
					color: $uni-tabbar-hovercolor;
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 24rpx;
				}

				.right {
					display: flex;
					align-items: center;
					font-size: 24rpx;

					.iconfont {
						font-size: 34rpx;
						color: #C6C9CC;
					}

					.icon-jinrujiantou {
						font-size: 42rpx;
					}

					.text {
						margin: 0 0rpx 0 24rpx;
					}
				}
			}
		}

		.button {
			width: 630rpx;
			height: 90rpx;
			background: $uni-tabbar-hovercolor;
			line-height: 90rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 90rpx;
			margin-top: 100rpx;
		}
	}

	.payment-box {
		width: 100%;
		min-height: 360rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, .04);

			.right {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				border: 2rpx solid $uni-tabbar-hovercolor;
				display: flex;
				align-items: center;
				justify-content: center;

				.center {
					background: $uni-tabbar-hovercolor;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
				}
			}

			.item-left {
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 60rpx;
					margin-right: 30rpx;
				}
			}
		}

		.close {
			text-align: center;
			margin-top: 50rpx;
			font-size: 34rpx;
			background: $uni-tabbar-hovercolor;
			color: #FFFFFF;
			border-radius: 90rpx;
			height: 90rpx;
		}
	}

	.icon-zhifubao {
		color: #22ABFF !important;
	}

	.icon-weixin {
		color: #34C758 !important;
	}
</style>